import { Ref, ref, onMounted, onUnmounted } from 'vue'

export const useClickOutSide = (elementRef: Ref<null|HTMLElement>):Ref<boolean> => {
  const isOutSide = ref(false)
  const handler = (e:MouseEvent) => {
    if (elementRef.value?.contains(e.target as HTMLElement)) {
      isOutSide.value = false
    } else {
      isOutSide.value = true
    }
  }
  onMounted(() => {
    document.addEventListener('click', handler)
  })

  onUnmounted(() => {
    document.removeEventListener('click', handler)
  })

  return isOutSide
}
